import React, { useState } from "react";
import {
  Card,
  Typography,
  Space,
  Divider,
  Row,
  Col,
  Button,
  Tag,
  Tabs,
  Radio,
  Alert,
  Tooltip,
  Switch,
  Badge,
  Select,
  Input,
  Modal,
} from "antd";
import ActionFooter from "../components/ActionFooter";
import SearchResults from "../components/SearchResults";
import SearchTreeResults from "../components/SearchTreeResults";
import { mockUsers, mockTags } from "../mock/data/selectOptions";
import { organizationTreeData } from "../mock/data/treeData";
import {
  QuestionCircleOutlined,
  InfoCircleOutlined,
  CheckCircleOutlined,
  SaveOutlined,
  RollbackOutlined,
} from "@ant-design/icons";

const { Title, Paragraph, Text } = Typography;
const { TabPane } = Tabs;
const { Option } = Select;

/**
 * ActionFooter 演示组件
 */
const ActionFooterDemo: React.FC = () => {
  // 基本状态
  const [activeTab, setActiveTab] = useState("basic");
  const [count, setCount] = useState(3);
  const [confirmed, setConfirmed] = useState(false);
  const [cancelText, setCancelText] = useState("取消");
  const [confirmText, setConfirmText] = useState("确定");
  const [confirmDisabled, setConfirmDisabled] = useState(false);
  const [showCount, setShowCount] = useState(true);
  const [align, setAlign] = useState<"left" | "center" | "right" | "space-between">("space-between");
  
  // 组合组件所需状态
  const [searchVisible, setSearchVisible] = useState(false);
  const [treeVisible, setTreeVisible] = useState(false);
  const [selectedValues, setSelectedValues] = useState<string[]>([]);
  const [searchText, setSearchText] = useState("");
  const [customFooterVisible, setCustomFooterVisible] = useState(false);
  const [showModal, setShowModal] = useState(false);
  
  // 处理确认按钮点击
  const handleConfirm = () => {
    setConfirmed(true);
    setTimeout(() => setConfirmed(false), 1500);
  };

  // 处理取消按钮点击
  const handleCancel = () => {
    // 重置状态
    setCount(3);
  };

  // 自定义渲染底部内容
  const renderCustomContent = () => (
    <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <Space>
        <Badge count={count} size="small">
          <Button size="small" icon={<SaveOutlined />}>保存草稿</Button>
        </Badge>
        <Button size="small" danger icon={<RollbackOutlined />}>重置</Button>
      </Space>
      <Space>
        <Button size="small" onClick={handleCancel}>返回</Button>
        <Button size="small" type="primary" onClick={handleConfirm}>
          提交审核
        </Button>
      </Space>
    </div>
  );

  // 渲染基础用法示例
  const renderBasicUsage = () => (
    <Card title="基础用法" style={{ marginBottom: 16 }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Space direction="vertical" style={{ width: '100%' }} size="large">
            {/* 基本用法 */}
            <div>
              <h3>标准用法</h3>
              <Card bodyStyle={{ padding: 0 }}>
                <div style={{ padding: '16px 16px 0', borderBottom: '1px solid #f0f0f0' }}>
                  <Paragraph>这是一个模拟内容区，可以包含表单、列表等内容</Paragraph>
                </div>
                <ActionFooter 
                  onConfirm={handleConfirm} 
                  onCancel={handleCancel}
                  count={count}
                  showCount={showCount}
                  confirmText={confirmText}
                  cancelText={cancelText}
                  confirmDisabled={confirmDisabled}
                  align={align}
                />
              </Card>
            </div>
            
            {/* 配置项 */}
            <Card title="配置项" size="small">
              <Space direction="vertical" style={{ width: '100%' }}>
                <Space>
                  <Text>项目数量:</Text>
                  <InputNumber value={count} onChange={(val) => setCount(val || 0)} min={0} max={100} />
                </Space>
                
                <Space>
                  <Text>显示数量:</Text>
                  <Switch checked={showCount} onChange={setShowCount} />
                </Space>
                
                <Space>
                  <Text>禁用确认按钮:</Text>
                  <Switch checked={confirmDisabled} onChange={setConfirmDisabled} />
                </Space>
                
                <Space>
                  <Text>对齐方式:</Text>
                  <Radio.Group value={align} onChange={e => setAlign(e.target.value)}>
                    <Radio.Button value="left">左对齐</Radio.Button>
                    <Radio.Button value="center">居中</Radio.Button>
                    <Radio.Button value="right">右对齐</Radio.Button>
                    <Radio.Button value="space-between">两端对齐</Radio.Button>
                  </Radio.Group>
                </Space>
                
                <Space>
                  <Text>自定义文本:</Text>
                  <Input 
                    value={confirmText} 
                    onChange={e => setConfirmText(e.target.value)}
                    placeholder="确认按钮文本"
                    style={{ width: 120 }}
                  />
                  <Input 
                    value={cancelText} 
                    onChange={e => setCancelText(e.target.value)}
                    placeholder="取消按钮文本"
                    style={{ width: 120 }}
                  />
                </Space>
                
                {confirmed && (
                  <Alert message="操作已确认!" type="success" showIcon />
                )}
              </Space>
            </Card>
          </Space>
        </Col>
      </Row>
    </Card>
  );

  // 渲染自定义内容示例
  const renderCustomContentExample = () => (
    <Card title="自定义内容" style={{ marginBottom: 16 }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Alert
            message="自定义渲染"
            description="通过renderContent属性可以完全自定义底部内容的渲染"
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
          />
          
          <Card bodyStyle={{ padding: 0 }}>
            <div style={{ padding: '16px 16px 0', borderBottom: '1px solid #f0f0f0' }}>
              <Paragraph>这是一个包含复杂表单的页面</Paragraph>
            </div>
            <ActionFooter 
              renderContent={renderCustomContent}
            />
          </Card>
          
          <Divider orientation="left">实现代码</Divider>
          <pre style={{ background: "#f5f5f5", padding: 16, borderRadius: 4 }}>
            {`// 自定义渲染底部内容
const renderCustomContent = () => (
  <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <Space>
      <Badge count={count} size="small">
        <Button size="small" icon={<SaveOutlined />}>保存草稿</Button>
      </Badge>
      <Button size="small" danger icon={<RollbackOutlined />}>重置</Button>
    </Space>
    <Space>
      <Button size="small" onClick={handleCancel}>返回</Button>
      <Button size="small" type="primary" onClick={handleConfirm}>提交审核</Button>
    </Space>
  </div>
);

<ActionFooter renderContent={renderCustomContent} />`}
          </pre>
        </Col>
      </Row>
    </Card>
  );
  
  // 渲染与其他组件的组合使用示例
  const renderCombinationUsage = () => (
    <Card title="组合使用" style={{ marginBottom: 16 }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Alert
              message="与其他组件组合"
              description="ActionFooter组件可以与SearchResults、SearchTreeResults等组件组合使用，形成完整的交互流"
              type="info"
              showIcon
            />
            
            <Divider orientation="left">与SearchResults组合</Divider>
            <div style={{ position: 'relative' }}>
              <Button onClick={() => setSearchVisible(!searchVisible)}>
                {searchVisible ? '隐藏' : '显示'} SearchResults
              </Button>
              
              {searchVisible && (
                <div style={{ marginTop: 16, border: '1px solid #eee', position: 'relative' }}>
                  <SearchResults
                    visible={true}
                    loading={false}
                    options={mockUsers.concat(mockTags)}
                    onSelect={() => {}}
                    multiple={true}
                    selectedValues={selectedValues}
                    onConfirm={(options) => {
                      setSelectedValues(options.map(o => o.value));
                      setSearchVisible(false);
                    }}
                    onCancel={() => setSearchVisible(false)}
                    style={{ position: 'static', boxShadow: 'none' }}
                  />
                </div>
              )}
            </div>
            
            <Divider orientation="left">与SearchTreeResults组合</Divider>
            <div style={{ position: 'relative' }}>
              <Button onClick={() => setTreeVisible(!treeVisible)}>
                {treeVisible ? '隐藏' : '显示'} SearchTreeResults
              </Button>
              
              {treeVisible && (
                <div style={{ marginTop: 16, border: '1px solid #eee', position: 'relative' }}>
                  <SearchTreeResults
                    visible={true}
                    loading={false}
                    treeData={organizationTreeData}
                    onSelect={() => {}}
                    multiple={true}
                    selectedKeys={selectedValues}
                    onConfirm={(nodes) => {
                      setSelectedValues(nodes.map(n => n.key));
                      setTreeVisible(false);
                    }}
                    onCancel={() => setTreeVisible(false)}
                    style={{ position: 'static', boxShadow: 'none' }}
                  />
                </div>
              )}
            </div>
            
            <Divider orientation="left">在Modal中使用</Divider>
            <Button type="primary" onClick={() => setShowModal(true)}>
              打开Modal
            </Button>
            
            <Modal
              title="带操作按钮的弹窗"
              open={showModal}
              footer={null} // 移除默认底部按钮
              onCancel={() => setShowModal(false)}
              bodyStyle={{ paddingBottom: 0 }} // 减少底部内边距
            >
              <div style={{ height: 200, overflow: 'auto' }}>
                <Paragraph>这里是Modal的内容区域</Paragraph>
                <Paragraph>您可以在这里放置表单、列表或其他内容</Paragraph>
              </div>
              
              <ActionFooter
                onConfirm={() => {
                  setShowModal(false);
                  setConfirmed(true);
                  setTimeout(() => setConfirmed(false), 1500);
                }}
                onCancel={() => setShowModal(false)}
                confirmText="提交"
                cancelText="关闭"
              />
            </Modal>
          </Space>
        </Col>
      </Row>
    </Card>
  );

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>ActionFooter 操作底部组件</Title>
      <Paragraph>
        ActionFooter 组件提供了标准化的底部操作区域，可用于表单、详情页、弹出窗口等场景，
        支持自定义对齐方式、按钮文本、显示数量等功能。
      </Paragraph>
      
      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="基础用法" key="basic">
          {renderBasicUsage()}
        </TabPane>
        <TabPane tab="自定义内容" key="custom">
          {renderCustomContentExample()}
        </TabPane>
        <TabPane tab="组合使用" key="combination">
          {renderCombinationUsage()}
        </TabPane>
      </Tabs>
      
      <Card title="API说明" style={{ marginTop: 24 }}>
        <Title level={4}>ActionFooter</Title>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={{ padding: '8px', borderBottom: '1px solid #f0f0f0', textAlign: 'left' }}>参数</th>
              <th style={{ padding: '8px', borderBottom: '1px solid #f0f0f0', textAlign: 'left' }}>说明</th>
              <th style={{ padding: '8px', borderBottom: '1px solid #f0f0f0', textAlign: 'left' }}>类型</th>
              <th style={{ padding: '8px', borderBottom: '1px solid #f0f0f0', textAlign: 'left' }}>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>onConfirm</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>确认按钮的回调函数</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>() => void</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>-</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>onCancel</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>取消按钮的回调函数</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>() => void</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>-</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>showCount</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>是否显示选择项数量</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>boolean</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>false</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>count</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>选中项的数量</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>number</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>0</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>confirmText</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>自定义确认按钮文本</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>ReactNode</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>确定</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>cancelText</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>自定义取消按钮文本</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>ReactNode</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>取消</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>confirmDisabled</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>确认按钮是否禁用</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>boolean</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>false</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>renderContent</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>自定义渲染底部内容</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>() => ReactNode</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>-</td>
            </tr>
            <tr>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>align</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>底部内容对齐方式</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>'left' | 'center' | 'right' | 'space-between'</td>
              <td style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>'space-between'</td>
            </tr>
          </tbody>
        </table>
      </Card>
    </div>
  );
};

// 数字输入组件
const InputNumber: React.FC<{ value: number, onChange: (value: number) => void, min?: number, max?: number }> = (props) => {
  const { value, onChange, min = 0, max = 100 } = props;
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let val = parseInt(e.target.value || "0");
    if (isNaN(val)) val = 0;
    if (val < min) val = min;
    if (val > max) val = max;
    onChange(val);
  };
  
  return (
    <Input
      type="number"
      value={value}
      onChange={handleChange}
      min={min}
      max={max}
      style={{ width: 60 }}
    />
  );
};

export default ActionFooterDemo;
